<script setup>
import { computed, inject, nextTick, ref, watch } from 'vue';
import { DeleteOutlined } from '@ant-design/icons-vue';
import LabelComment from './label-comment.vue';
import BaseDetails from '@/components/data-label/base-details.vue';
import BaseDataList from '@/components/data-label/base-data-list.vue';
import { VisibleIcon } from '@/util/index.js';
import { Modal } from 'ant-design-vue';

const OpEq = inject('OpEq');
const editingComment = inject('editingComment');
const ques = inject('ques');
const comments = inject('comments');
const clearComments = inject('clearComments');
const toggleVisibleOfComments = inject('toggleVisibleOfComments');

const icon = computed(VisibleIcon( () => R.any(R.prop('visible'), comments.value) ));
</script>

<template>
  <base-details
    class="label-comments"
    :open="0 < comments.length || Boolean(ques?.rejectReason)"
  >
    <template #header>
      <span>已批注（{{ comments.length }}）</span>
      <div class="fn">
        <template v-if="OpEq('审核')">
          <a-button
            :disabled="!comments.length"
            @click.prevent.stop="
              () => Modal.confirm({
                centered: true,
                content: `确定要清空批注吗？`,
                onOk: clearComments,
              })"
            >
            <template #icon><delete-outlined style="color: rgb(200,0,0);" /></template>
          </a-button>
        </template>
  
        <a-button :disabled="!comments.length" @click.prevent.stop="() => toggleVisibleOfComments()">
          <template #icon>
            <component :is="icon" style="color: rgb(26,115,232);"></component>
          </template>
        </a-button>
      </div>
    </template>

    <template v-if="Boolean(ques?.rejectReason)">
      <li
        class="label-comment">
        <span class="reason">{{ ques.rejectReason }}</span>
        <a-tooltip placement="left">
          <template #title>{{ ques.remark }}</template>
          <span class="remark ellipsis">{{ ques.remark }}</span>
        </a-tooltip>
      </li>
    </template>

    <base-data-list
      :list="comments"
      @clickself="() => (editingComment = null)">
      <template #default="{ item }">
        <label-comment :item="item"></label-comment>
      </template>
    </base-data-list>
  </base-details>
</template>

<style>
.obj-detn .label-comments > .label-comment {
  display: flex;
  gap: 1em;
  padding-left: 8px;
  padding-right: 12px;
  border-left: 4px solid transparent;
}

.label-comments > .base-data-list-container { --shrink: 80px; }
.label-comments .base-data-list > li > :first-child { flex: unset; }
</style>
